<template>
    <view class="login-container flex col-center">
        <image class="logo" src="https://www.enjoyluxe.cn/api/files/weixin/img/login-bg1.png" mode="aspectFit">
        </image>
        <!-- <image class="logo" src="https://seven12345.oss-cn-beijing.aliyuncs.com/static/login-bg2" mode="aspectFit">
        </image> -->
        <button class="wx-login-btn" @click="wxLogin">微信一键登录</button>
        <button class="" @click="noLogin">暂不登录</button>
        <view class="agreement-check">
            <u-checkbox v-model="checked" shape="circle" active-color="#C34F1A" style="transform:scale(0.8);" />
            <text>我已阅读并同意</text>
            <text class="agreement-link" @click="openAgreement">《隐私协议》</text>
        </view>
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue'
    import {
        onLoad
    } from '@dcloudio/uni-app'
    // import uCheckbox from 'uview-plus/components/u-checkbox/u-checkbox.vue'
    import {
        apiwxLogin
    } from '@/api/index.js'
    // 用户信息
    const userInfo = ref({})
    // 用户协议勾选状态
    const checked = ref(false)

    /**
     * 打开用户协议页面函数
     */
    function openAgreement() {
        // 这里可以跳转到用户协议页面或弹窗
        uni.navigateTo({
            url: '/pages/agreement/agreement' // 请确保有此页面
        })
    }

    /**
     * 微信一键登录逻辑
     * 1. 调用uni.login获取code
     * 2. 调用uni.getUserProfile获取用户信息
     * 3. 可将用户信息存储到本地或全局
     */
    const wxLogin = () => {
        // console.log(checked.value);
        // 校验是否勾选用户协议
        if (!checked.value) {
            uni.showToast({
                title: '请先同意用户协议',
                icon: 'none'
            })
            return
        }
        uni.showLoading({
            title: '登陆中',
            icon: 'none'
        })
        uni.login({
            provider: 'weixin',
            success: function(loginRes) {
                apiwxLogin({
                    code: loginRes.code
                }).then(res => {
                    if (res.code == 200) {
                        uni.setStorageSync('token', res.data.token)
                        uni.setStorageSync('userInfo', res.data.wxBackstageUser)
                        uni.hideLoading()
                        uni.showToast({
                            title: '登录成功',
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/index/index'
                            })
                        }, 1000)
                    }
                }).catch(err => {
                    uni.$u.toast(err)
                    uni.hideLoading()
                })
            },
            fail: function() {
                uni.showToast({
                    title: '微信登录失败',
                    icon: 'none'
                })
                uni.hideLoading()
            }
        })
    }

    const noLogin = () => {
        uni.reLaunch({
            url: '/pages/index/index'
        })
    }

    onLoad(() => {
        // 可在此处判断是否已登录， 已登录可直接跳转
        const token = uni.getStorageSync('token')
        if (token) {
            uni.reLaunch({
                url: '/pages/index/index'
            })
        }
    })
</script>

<style lang="scss">
    .login-container {
        height: 100vh;
        width: 100vw;
        padding: 0 78rpx;
        background: linear-gradient(261deg, #FBC260, #FDDB9B);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .logo {
        width: 593rpx;
        height: 650rpx;
    }

    .wx-login-btn {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        background: linear-gradient(0deg, #E87038, #BE4B16);
        color: #fff;
        font-size: 32rpx;
        border-radius: 45rpx;
        margin-top: 30rpx;
    }

    .agreement-check {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 30rpx;
        font-size: 24rpx;
        color: #666;
    }

    .agreement-link {
        color: #E87038;
        margin-left: 6rpx;
        text-decoration: underline;
    }

    /* 覆盖u-checkbox未勾选时的边框颜色为白色，仅影响未选中状态 */
    ::v-deep .u-checkbox__icon-wrap {
        &.u-checkbox__icon-wrap--circle:not(.u-checkbox__icon-wrap--checked) {
            border-color: #000 !important;
        }
    }
</style>